<template>
  <s-layout title="领取奖品">
    <view class="lottery-result-container">
      <view class="card">
		<view class="top2">
			{{ state.lottery.goods_name }}
			<view class="yuan1"></view>
			<view class="yuan2"></view>
		</view>
		<view class="top3">
			<template v-for="item in state.list" :key="item.code">
				<view class="listcls">
					<view class="list1">
						{{ item.name }}
					</view>
					<view class="list2">
						<input class="ipt" type="text" :value="state.lottery[item.code]" :placeholder="state.placeholderlist[item.code]" placeholder-style="color:#C6C6C6" disabled />
					</view>
				</view>
			</template>
		</view>
		<view class="btn" @click="tapbtn" v-if="!state.lottery.shipping_address">
			<view class="btntext">
				<view class="text1">
					确认收货地址
				</view>
				<view class="text2">
					选择后不可修改
				</view>
			</view>
		</view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';

  let state = reactive({
	list: [
		  {name:"抽奖时间",code:"create_time"},
		  {name:"收货地址",code:"shipping_address"},
		  {name:"联系电话",code:"contact_phone"},
		  {name:"物流公司",code:"logistics_company"},
		  {name:"快递单号",code:"tracking_number"},
		  {name:"发货时间",code:"shipping_time"},
	],
	lottery: {},
	placeholderlist: {
		  create_time:"未获取到抽奖时间",
		  shipping_address:"未确认收获地址",
		  contact_phone:"未确认收获地址",
		  logistics_company:"未确认发货",
		  tracking_number:"未确认发货",
		  shipping_time:"未确认发货",
	}
  });
  const getdata = async (id) => {
	  const str = '?id=' + id
	  const res = await sheep.$api.prize_week.lotteryonlinePrizeDetail(str)
	  state.lottery = res.data
  }
  const tapbtn = () => {
	  uni.$once('SELECT_ADDRESS', (e) => {
	    changeConsignee(e.addressInfo);
	  });
	  sheep.$router.go('/pages/user/address/list');
  }
  async function changeConsignee(addressInfo) {
  //   if (isEmpty(addressInfo)) {
  //     const { error, data } = await sheep.$api.user.address.default();
	 //  console.log('data',data)
	 //  console.log('error',error)
  //     if (error === 0 && !isEmpty(data)) {
  //       addressInfo = data;
		// console.log('addressInfo',addressInfo)
  //     }
  //   }
  //   if (!isEmpty(addressInfo)) {
		// console.log('addressInfo',addressInfo)
		// console.log('addressInfo.address',addressInfo.address)
  //     // state.addressInfo = addressInfo;
  //     // state.orderPayload.address_id = state.addressInfo.id;
  //   }
	const body = {
		id:state.lottery.user_dial_prize_log_id,
		address:addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address,
		name:addressInfo.consignee,
		phone:addressInfo.mobile
	}
	const { error, data } = await sheep.$api.prize_week.lotteryonlinePrizeAddress(body)
	if(error === 0){
		getdata(state.lottery.user_dial_prize_log_id)
	}
    // getdata();
  }

  onLoad((id) => {
    // getdata(13685)
    getdata(id.id)
  });
</script>

<style lang="less" scoped>
.lottery-result-container{
  background-color: #f2f3f6;
  font-family: PingFang SC;
  padding-bottom: 20rpx;
  .card{
	  width: 90%;
	  margin-left: 5%;
	  margin-top: 20rpx;
	  background-color:#FFFFFF;
	  border-radius: 20rpx;
	  .top1{
		  padding-top: 20rpx;
		  width: 95%;
		  margin-left: 5%;
		  font-weight: bold;
		  font-size: 28rpx;
	  }
	  .top2{
	  		  padding-top: 20rpx;
	  		  padding-bottom: 20rpx;
			  position: relative;
	  		  width: 90%;
	  		  margin-left: 5%;
	  		  font-weight: bold;
	  		  font-size: 28rpx;
			  border-bottom: 1px dashed #D1D1D1;
			  .yuan1{
				  width:30rpx;
				  height:30rpx;
				  position: absolute;
				  background-color: #f2f3f6;
				  border-radius: 50%;
				  bottom: -15rpx;
				  right: -43rpx;
			  }
			  .yuan2{
			  	  width:30rpx;
			  	  height:30rpx;
			  	  position: absolute;
			  	  background-color: #f2f3f6;
			  	  border-radius: 50%;
			  	  bottom: -15rpx;
			  	  left: -43rpx;
			  }
	  }
	  .top3{
		  width: 100%;
		  padding-top: 20rpx;
		  padding-bottom: 20rpx;
		  justify-content: center;
		  .ercodecls{
			  width: 228rpx;
			  height: 228rpx;
			  position: relative;
			  .ercode{
				width: 228rpx;
				height: 228rpx;
			  }
			  .writeof{
				  position: absolute;
				  right: 0%;
				  bottom: 0%;
				  width: 150rpx;
				  height: 150rpx;
			  }
		  }
		  
	  }
	  .top4{
		  width: 100%;
		  padding-bottom: 20rpx;
		  font-size: 24rpx;
		  font-weight: bold;
		  text-align: center;
	  }
	  .listcls{
		  padding: 8rpx 5%;
		  width: 90%;
		  display: flex;
		  font-size: 24rpx;
		  .list1{
		  			  width: 30%;
		  			  white-space: nowrap;
		  			  overflow: hidden;
		  			  text-overflow: ellipsis;
					  color: #C6C6C6;
		  		  }
		  		  .list2{
		  		  	  width: 70%;
					  .ipt{
						  width: 100%;
						  white-space: nowrap;
						  overflow: hidden;
						  text-overflow: ellipsis;
						  text-align: right;
					  }
		  		  }
	  }
  }
}
.btn{
	position: fixed;
	bottom: 34rpx;
	left: 15%;
	top: 751px;
	width: 70%;
	height: 88rpx;
	border-radius: 20rpx;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 主题色 */
	background: linear-gradient(270deg, #003AD9 0%, #3DC8FF 100%);
	.btntext{
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		.text2{
			font-size: 24rpx;
		}
	}
}
</style>
